vielle.dev
[Archived] Archived WIP of vielle.dev
4.7 kB
188 lines
1---
2import Base from "@/Base.astro";
3import Nav from "@/components/generic/Nav.astro";
4import LightDarkToggle from "@/components/generic/LightDarkToggle.astro";
5import CodeHeading from "@/components/blog/CodeHeading.astro";
6
7import { render } from "astro:content";
8import { getEntry } from "astro:content";
9import { parse } from "node:path";
10
11import { blog } from "@/config";
12import "@/components/blog/post.css";
13
14const {
15 post: { light, dark, rainbow },
16} = blog.palette;
17
18const { id } = Astro.params;
19if (!id) return Astro.redirect("/404");
20
21const post = await getEntry("blog", id);
22if (!post) return Astro.redirect("/404");
23
24const {
25 data: { title, hasMdx, colour },
26} = post;
27
28const Content = await (async () => {
29 if (!hasMdx) return render(post).then((x) => x.Content);
30
31 if (!post.filePath) throw new Error("Post does not have a filepath");
32 return import(`../../content/posts/${parse(post.filePath).name}.mdx`).then(
33 (x) => x.Content,
34 );
35})();
36---
37
38<Base {title}>
39 <header>
40 <Nav current={title} />
41
42 <h1>{title}</h1>
43
44 <LightDarkToggle
45 colours={{ fg: "var(--bg-main)", bg: "var(--typo-body)" }}
46 />
47 </header>
48
49 <main style={`--accent: ${colour};`}>
50 <div class="content">
51 <Content />
52 </div>
53 </main>
54</Base>
55
56<CodeHeading colours={{ text: "var(--typo-body)", border: "var(--bg-main)" }} />
57
58<script>
59 document.querySelectorAll(".astro-code").forEach((code) => {
60 if (!(code instanceof HTMLElement)) return;
61
62 const heading = document.createElement("code-heading");
63 heading.setAttribute("contents", code.innerText);
64
65 const lang = code.dataset["language"];
66 if (lang && lang !== "plaintext") {
67 const langEl = document.createElement("span");
68 langEl.innerText = "." + lang;
69 heading.append(langEl);
70 }
71
72 code.prepend(heading);
73 });
74</script>
75
76<!-- page styles -->
77<style>
78 header {
79 position: fixed;
80 top: 0;
81 width: 100%;
82 z-index: 999;
83 display: flex;
84 align-items: center;
85 justify-content: space-between;
86
87 background-color: var(--bg-secondary);
88 color: var(--typo-heading);
89 padding-bottom: 5px;
90
91 & > :global(:not(style, script):last-of-type) {
92 margin-right: 10px;
93 margin-top: 5px;
94 }
95 }
96
97 body {
98 background-color: var(--bg-main);
99 color: var(--typo-body);
100 }
101
102 .content {
103 padding-block: 4em;
104 }
105
106 .content,
107 :global(.full-width),
108 :global([data-para-flag--full-width]) {
109 --padding-inline: 20px;
110 --content-max-width: 60ch;
111 --breakout-max-width: 80ch;
112
113 --content-size: min(
114 100% - var(--padding-inline) * 2,
115 var(--content-max-width)
116 );
117 --breakout-size: calc(
118 (var(--breakout-max-width) - var(--content-max-width)) / 2
119 );
120
121 display: grid;
122 grid-template-columns:
123 [full-width-start] minmax(var(--padding-inline), 1fr)
124 [breakout-start] minmax(0, var(--breakout-size))
125 [content-start] var(--content-size) [content-end]
126 minmax(0, var(--breakout-size)) [breakout-end]
127 minmax(var(--padding-inline), 1fr) [full-width-end];
128
129 & > :global(*) {
130 grid-column: content;
131 }
132
133 & > :global(.breakout),
134 & > :global([data-para-flag--breakout]) {
135 grid-column: breakout;
136 }
137
138 & > :global(.full-width),
139 & > :global([data-para-flag--full-width]) {
140 grid-column: full-width;
141 }
142 }
143
144 :global(#nav-menu) {
145 height: 3em;
146 aspect-ratio: 1;
147 display: flex;
148 justify-content: center;
149 align-items: center;
150
151 & :global(svg) {
152 stroke: var(--typo-body);
153 }
154 }
155</style>
156
157<style
158 set:html={`
159:root {
160 color-scheme: ${
161 Astro.cookies.get("colour-mode")?.value === "light"
162 ? "light"
163 : Astro.cookies.get("colour-mode")?.value === "dark"
164 ? "dark"
165 : "light dark"
166 };
167
168 --bg-main: light-dark(${light.background.main}, ${dark.background.main});
169 --bg-secondary: light-dark(${light.background.secondary}, ${dark.background.secondary});
170 --bg-code: light-dark(${light.background.code}, ${dark.background.code});
171
172 --typo-body: light-dark(${light.typography.body}, ${dark.typography.body});
173 --typo-heading: light-dark(${light.typography.heading}, ${dark.typography.heading});
174 --typo-subheading: light-dark(${light.typography.subheading}, ${dark.typography.subheading});
175 --typo-code: light-dark(${light.typography.code}, ${dark.typography.code});
176
177 --typo-url: light-dark(${light.typography.url}, ${dark.typography.url});
178 --typo-visited: light-dark(${light.typography.visited}, ${dark.typography.visited});
179
180 --rainbow-0: ${rainbow[0]};
181 --rainbow-1: ${rainbow[1]};
182 --rainbow-2: ${rainbow[2]};
183 --rainbow-3: ${rainbow[3]};
184 --rainbow-4: ${rainbow[4]};
185 --rainbow-5: ${rainbow[5]};
186}
187`}
188></style>